<!DOCTYPE html>
<html>
	<head>
		<title>
			Familibook >> Test
		</title>
		<script>
			var n = 4;
			function getTries(name) {
				if (name.length > 11) {
					return 20;
				}
				else if (name.length < 10 && name.length > 5) {
					return (name.length * 2);
				}
				else {
					return Math.floor(name.length * 2.5);
				}
			}

			function getFont(ctx, name, tries) {
				for (var i = 0; i < tries; i++) {
					var fontc = "bold " + (i * 0.1) + "em sans-serif";
					ctx.font = fontc;
					var metric = ctx.measureText(name);
					var widthf = metric.width;
					if (widthf > 115) {
						return font;
					}
					var font = fontc;
				}
			}

			function Person() {
				this.usi = undefined;
				this.id = 0;
				this.name = "Anonymous";
				this.spouse = undefined;
				this.parentsArray = new Array();
				this.childrenArray = new Array();
				this.sex = "Male";
				this.box;
				this.imageurl = "../pics/" + this.sex + "-avatar.png";
			}

			function Box() {
				this.person = new Person();
				this.x = 0;
				this.y = 0;
				this.drawn = false;
				this.assigned = false;
				this.level = 0;
			}
			{% for user in users %}
				var {{ user.usi }} = new Person();
			{% endfor %}

			var DisplayMatrix = new Array(n);
			for (var x = 0; x < DisplayMatrix.length; x++) {
				DisplayMatrix[x] = new Array(n);
			}
			for (var i = 0; i < DisplayMatrix.length; i++) {
				for (var j = 0; j < DisplayMatrix[i].length; j++) {
					DisplayMatrix[i][j] = new Box();
					DisplayMatrix[i][j].level = j + 1;
					DisplayMatrix[i][j].y = (j * 100) + 25;
					DisplayMatrix[i][j].x = (i * 225) + 10;
				}
			}

			function feedData() {
				{% for user in users %}
					{{ user.usi }}.usi = "{{ user.usi }}";
					{{ user.usi }}.id = 1;
					{{ user.usi }}.name = "{{ user.name }}";
					{% if not user.spouseusi %}
					{% else %}
						{{ user.usi }}.spouse = {{user.spouseusi}};
					{% endif %}
					var i = 0;
					{% for child in user.childrenArray %}
						{{ user.usi }}.childrenArray[i] = {{ child.usi }};
						i++;
					{% endfor %}
					{% if not user.fatherusi %}
						{% if not user.motherusi %}
						{% else %}
							{{ user.usi }}.parentsArray[0] = {{ user.motherusi }};
						{% endif %}
					{% else %}
						{{ user.usi }}.parentsArray[0] = {{ user.fatherusi }};
						{% if not user.motherusi %}
						{% else %}
							{{ user.usi }}.parentsArray[1] = {{ user.motherusi }};
						{% endif %}
					{% endif %}
					{{ user.usi }}.sex = "{{ user.sex }}";
					{{ user.usi }}.imageurl = "../pics/" + {{ user.usi }}.sex + "-avatar.png";
					{{ user.usi }}.box = getbox({{ user.usi }});
					{{ user.usi }}.box.assigned = true;
					{{ user.usi }}.box.person = {{ user.usi }};
				{% endfor %}
			}

			function getbox(person) {
				if (person.parentsArray.length !== 0) {
					var anti = 0;
					for (var i = 0; i < DisplayMatrix.length; i++) {
						if (DisplayMatrix[i][person.parentsArray[0].box.level].assigned)
							continue;
						else if (!DisplayMatrix[i][person.parentsArray[0].box.level].assigned) {
							anti = i;
							break;
						}
					}
					return DisplayMatrix[anti][person.parentsArray[0].box.level];
				}
				if (person.spouse !== undefined) {
					if (person.spouse.box !== undefined) {
						var anti = 0;
						for (var i = 0; i < DisplayMatrix.length; i++) {
							if (DisplayMatrix[i][person.spouse.box.level].assigned)
								continue;
							else if (!DisplayMatrix[i][person.spouse.box.level - 1].assigned) {
								anti = i;
								break;
							}
						}
						return DisplayMatrix[anti][person.spouse.box.level - 1];
					}
				}
				if (person.parentsArray.length == 0) {
					var anti = 0;
					for (var i = 0; i < DisplayMatrix.length; i++) {
						if (DisplayMatrix[i][0].assigned)
							continue;
						else if (!DisplayMatrix[i][0].assigned) {
							anti = i;
							break;
						}
					}
					return DisplayMatrix[anti][0];
				}
			}

			function drawCanvas() {
				var ctx = canvas.getContext('2d');
				feedData();
				manageStrokes(ctx);
				managePersonalBoxes(ctx);
			}

			function managePersonalBoxes(ctx) {
				for (var i = 0; i < DisplayMatrix.length; i++) {
					for (var j = 0; j < DisplayMatrix[i].length; j++) {
						if (DisplayMatrix[i][j].person.id !== 0) {
							drawPersonalBox(ctx, DisplayMatrix[i][j].person);
						}
					}
				}
			}

			function manageStrokes(ctx) {
				for (var i = 0; i < DisplayMatrix.length; i++) {
					for (var j = 0; j < DisplayMatrix[i].length; j++) {
						for (var k = 0; k < DisplayMatrix[i][j].person.parentsArray.length; k++) {
							drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.parentsArray[k], true);
						}
						for (var k = 0; k < DisplayMatrix[i][j].person.childrenArray.length; k++) {
							drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.childrenArray[k], true);
						}
						if (DisplayMatrix[i][j].person.spouse !== undefined) {
							drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.spouse, false);
						}
					}
				}
			}
			
			function getMousePos(canvas, evt) {
				var obj = canvas;
				var top = 0;
				var left = 0;
				while (obj.tagName != 'BODY') {
					top += obj.offsetTop;
					left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
				var mouseX = evt.clientX - left + window.pageXOffset;
				var mouseY = evt.clientY - top + window.pageYOffset;
				return {
					x: mouseX,
					y: mouseY
				};
			}
			
			function drawStroke(ctx, parentorspouse, sonorspouse, whetherparentrelationorspousetrueifparentfalseifspouse) {
				var st1 = parentorspouse;
				var nd2 = sonorspouse;
				var rel = whetherparentrelationorspousetrueifparentfalseifspouse;
				var initx = st1.box.x + 100;
				var inity = st1.box.y + 38;
				var endx = nd2.box.x + 100;
				var endy = nd2.box.y + 38;
				var ymidy = (endy + inity) / 2;
	
				if (rel) {
					ctx.beginPath();
					ctx.moveTo(initx, inity);
					ctx.lineTo(initx, ymidy);
					ctx.lineTo(endx, ymidy);
					ctx.lineTo(endx, endy);
					ctx.stroke();
				}
				else if (!rel) {
					ctx.beginPath();
					ctx.moveTo(initx, inity);
					ctx.lineTo(endx, endy);
					ctx.stroke();
				}
			}

			function drawPersonalBox(ctx, person) {
				var width = 200;
				var height = 75;
				var border = 3;
				var name = person.name;
				var tries = getTries(name);
				var imagewidth;
				var imageheight;
				var imagedownscaling = 2.6;
				var x = person.box.x;
				var y = person.box.y;
				var imageurl = person.imageurl;
	
				canvas.addEventListener('mousedown', function(e){
					mousepos = getMousePos(canvas, e);
					if( mousepos.x > x && mousepos.x < x + 200 && mousepos.y < y + 75 && mousepos.y > y ){
						window.location = "/detail?usi=" + person.usi;
					}
				}, false);

				var img = new Image();
				img.onload = function () {
					imagewidth = img.width / imagedownscaling;
					imageheight = img.height / imagedownscaling;
					ctx.drawImage(img, x + border + 2, y + border + 2, imagewidth, imageheight);
				};
				img.src = imageurl;

				imagewidth = 70;
				ctx.beginPath();
				ctx.fillStyle = "#0000ff";
				ctx.fillRect(x, y, width, height);
				ctx.fillStyle = "#446688";
				ctx.fillRect(x + border, y + border, width - (border * 2), height - (border * 2));
				ctx.fillStyle = "#c2406f";
				ctx.font = getFont(ctx, name, tries);
				ctx.textAlign = "center";
				ctx.fillText(name, x + border + imagewidth + (((x + width - border) - (x + border + imagewidth)) / 2), y + border + 20, 125);
				ctx.fill();
			}
			
			{% for user in users %}
				function {{ user.usi }}Positionfunction(){
					{% for user in users %}
						{{ user.usi }}PositionInput.style.display = "none";
					{% endfor %}
					{{ user.usi }}PositionInput.style.display = "block";
				}
			{% endfor %}
			
			function init() {
				canvas.height = document.height - 50;
				canvas.width = document.width - 250;
				{% for user in users %}
					{{ user.usi }}PositionInput.style.display = "none";
				{% endfor %}
				drawCanvas();
			}
		</script>
		<style type="text/css">
			.divit{
				width: 200px;
				height: 50px;
				color: #ff6633;
				cursor: pointer;
			}
		</style>
	</head>
	<body onload="init();">
		<a href="/sign?type=new">
			Register
		</a>
		<table border="0">
			<tbody>
				<tr>
					<td>
						<canvas id="canvas"></canvas>
					</td>
					<td>
						<h3>Edit Position Details</h3>
							<br />
							<br />
							<br />
						<form method="post" action="/edit">
							{% for user in users %}
								<div id="{{ user.usi }}positionHolder">
									<div class="divit" onclick="{{ user.usi }}Positionfunction()" id="{{ user.usi }}PositionTitle">
										<b>{{ user.name }}</b>
									</div>
									<div id="{{ user.usi }}PositionInput">
										x: &nbsp;&nbsp; <input type="text" name="{{ user.usi }}x" />
											<br />
										y: &nbsp;&nbsp; <input type="text" name="{{ user.usi }}y" />
											<br />
											<br />
									</div>
								</div>
							{% endfor %}
						</form>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>